import './index.less'
import {DatePicker, NavBar} from "antd-mobile";
import {useState} from "react";
import classNames from "classnames";

const Month = () => {
    const [visible, setVisible] = useState(false);
    return (
        <div className='month'>
            {/* 导航标题 */}
            <NavBar backArrow={false}>月度收支</NavBar>

            {/* 收支显示信息 */}
            <div className='month-box'>
                <div className='month-info'>
                    <div className='month-top'>
                        <span>2023</span>
                        <span className='line'></span>
                        <span>3月账单</span>
                        {/* 添加固定类名 arrow    当visible 为true时添加类名 end-arrow */}
                        <span className={classNames('arrow', visible && 'end-arrow')}
                              onClick={() => setVisible(true)}></span>
                    </div>
                    <div className='month-btn'>
                        <div>
                            <p>100</p>
                            <p>支出</p>
                        </div>
                        <div>
                            <p>200</p>
                            <p>收入</p>
                        </div>
                        <div>
                            <p>200</p>
                            <p>结余</p>
                        </div>
                    </div>
                </div>
            </div>
            {/* 时间选择器 */}
            <DatePicker
                title={'记账日期'}
                visible={visible}
                precision='month'
                onCancel={() => setVisible(false)}
                onClose={() => setVisible(false)}
                onConfirm={() => setVisible(false)}
                max={new Date()}
            />
        </div>

    )
}
export default Month
